<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<base href="/">
		<meta charset="utf-8">
		<title>TCL 商城登录</title>
		<link rel="stylesheet" href="login/logon.css">
		<link rel="stylesheet" href="fonts/iconfont.css">
<!--		<link rel="stylesheet" href="layui/css/layui.css">-->
	</head>
	<body>
		<div class="w">
			<div class="logo-wrapper">
				<a href="home/home.html">
					<img src="images/LOGO_2.png" alt="">
				</a>
			</div>
			<div class="crumb">
				<span>TCL账号登陆</span>
			</div>
		</div>
		<div class="menu-main-wrapper w">
			<div class="menu-main">
				<div class="menu-main-container">
					<form action="" name="form">
						<h5>账号密码登录</h5>
						<input type="text" name="username" style="margin-top: 20px;" placeholder="用户名">
						<span></span>
						<input type="password" name="password" placeholder="登陆密码">
						<span></span>
					</form>
					<button  type="button" class="btn-logon">登录</button>
					<a href="page/register">还没有账号吗？点击立刻注册账号</a>
				</div>
			</div>
		</div>
		<div class="foot w">
			<span>
				<a href="">经销商之家</a>
			</span>
			<span>
				©2010-2023 TCL CORPORATION All Rights Reserved.<a href="">使用条款</a>TCL集团股份有限公司版权所有 粤ICP备05040863号
			</span>
		</div>
<!--		<script src="login/logon.js"></script>-->
		<script src="layui/layui.all.js"></script>
		<script>
			const $ = layui.$;
			const layer = layui.layer;
			$(".btn-logon").click(function () {
				// 验证数据
				let username = $("[name='username']").val();
				let password = $("[name='password']").val();
				if (!username || !password) {
					layer.msg("用户名和密码不能为空", { icon: 2 });
					return;
				}
				let reg = /^[a-zA-Z0-9]{6,16}$/;
				if (!reg.test(username) || !reg.test(password)) {
					layer.msg("用户名和密码格式不正确，需 6 - 16 位字母或数字", { icon: 2 });
					return;
				}
				const btn = $(".btn-logon");
				btn.prop("disabled", true);
				// 登录操作
				$.ajax({
					url: 'shopping/dologin',
					data: { username: username, password: password },
					success: function (result) {
						if (result.code === 200) {
							layer.msg("登陆成功", { icon: 1 });
							setTimeout(function () {
								location.href = "page/index";
							}, 1800);
						} else {
							layer.msg(result.msg || "用户名或密码错误", { icon: 2 });
						}
					},
					error: function (xhr, status, error) {
						layer.msg("登录请求出错，请稍后重试", { icon: 2 });
						console.error("AJAX 请求出错: ", error);
					},
					complete: function () {
						btn.prop("disabled", false);
					}
				});
			});
		</script>
	</body>
</html>